<template>
	<div id="avitves"></div>
</template>

<script>
	export default {
		data(){
			return {
				avitves:'',
				category:[],
				datas:[]
			}
		},
		mounted() {
			this.getData()
			this.draw();
		},
		methods:{
			getData(){
				this.$http.get(this.$api.bonusActivity).then(res=>{
					res.data.forEach((item,index)=>{
						this.category.push(item.dateTime);
						this.datas.push(item.num)
					});
					this.draw();
				})
			},
			draw(){
				this.avitves = this.$echarts.init(document.getElementById('avitves'));
				this.avitves.setOption({
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross'
					        },
					    },
						legend:{
							show:false
						},
					    xAxis: [{
					        type: 'category',
							inverse:false,
					        axisTick: {
					            alignWithLabel: true
					        },
							axisLine: {
							    lineStyle: {
							        color: '#888'
							    }
							},
					        data: this.category
					    }],
					    yAxis: [{
					            type: 'value',
					            name: '加成活跃度',
					            position: 'left',
					            axisLine: {
					                lineStyle: {
					                    color: '#888'
					                }
					            },
					            axisLabel: {
					                formatter: '{value}'
					            }
					        },
					    ],
					    series: [{
					            name: '加成活跃度',
					            type: 'bar',
					            data: this.datas,
								barMaxWidth:'40',
					            itemStyle: {
					               color:'#cf9ef1'
					            }
					        }
					    ]
				})
			}
		}
	}
</script>

<style scoped>
	#avitves{
		width: 100%;
		height: 100%;
	}
</style>
